<template>
  <view class="elderly-detail">
    <view class="elderly-list">
      <!-- 基本信息 -->
      <view class="info-card">
        <view class="name-section">
          <text class="name-value">姓名：{{ elderlyInfo.name || '无' }}</text>

          <text class="status-tag">{{ elderlyInfo.status === 1 ? '已入驻' : '未入驻' }}</text>
        </view>
        <div class="info-wrap">
          <view class="info-row">
            <view class="info-item">
              <text class="info-label">性别</text>
              <text class="info-value">{{ elderlyInfo.sex || '无' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">年纪</text>
              <text class="info-value">{{ calculateAge(elderlyInfo.birthday) || '无' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">身份证号</text>
              <text class="info-value">{{ elderlyInfo.id_num || '无' }}</text>
            </view>
          </view>
          <view class="info-row">
            <view class="info-item">
              <text class="info-label">籍贯</text>
              <text class="info-value">{{ elderlyInfo.province || '无' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">婚姻状况</text>
              <text class="info-value">{{ getMaritalStatus(elderlyInfo.marray) || '无' }}</text>

            </view>
            <view class="info-item">
              <text class="info-label">既往病史</text>
              <text class="info-value">{{ elderlyInfo.history || '无' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">过敏史</text>
              <text class="info-value">{{ elderlyInfo.mi_history || '无' }}</text>
            </view>
          </view>
        </div>
      </view>

      <!-- 待办活动 -->
      <view class="todo-section">
        <view class="section-title">
          <view class="title-indicator"></view>
          <text class="title-text">待办活动</text>
        </view>
        <view class="todo-card">
          <view class="todo-header">
            <text class="header-item">服药管理</text>
            <text class="header-item">药品名称</text>
            <text class="header-item">服药提醒</text>
          </view>
          <view class="todo-row">
            <text class="row-item">需要服药</text>
            <text class="row-item">阿莫西林</text>
            <text class="row-item">每天三次</text>
          </view>
        </view>
      </view>

      <!-- 日常信息记录 -->
      <view class="daily-section">
        <view class="section-title">
          <view class="title-indicator"></view>
          <text class="title-text">日常信息记录</text>
        </view>
        <view v-if="records.length > 0" class="daily-card timeline">

          <view class="timeline-item" v-for="(record, index) in records" :key="index">
            <view class="timeline-marker">
              <text class="marker-number">{{ getDayFromDate(record.event_time) }}</text>
              <text class="marker-date">{{ getYearMonthFromDate(record.event_time) }}</text>
            </view>
            <view class="timeline-content">
              <view class="record-card">
                <view class="record-header">
                  <text class="record-title">{{ record.title }}</text>
                  <text class="record-time">{{ getTimeFromDate(record.event_time) }}</text>
                </view>
                <text class="record-description">{{ record.desc }}</text>
                <view class="record-images">
                  <view class="image-item" v-for="(img, imgIndex) in [13, 14, 15, 16,]">
                    <image class="record-image" src="/static/icon/image 5036.png" mode="aspectFill" />
                    <!-- <image class="record-image" :src="record.imgurl" mode="aspectFill" /> -->
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <u-empty mode="data" text="暂无记录" marginTop="0" icon="/static/no-data.png"></u-empty>
        </view>
      </view>
    </view>
    <u-tabbar :fixed="true" :placeholder="true" :border="false" z-index="100">
      <view class="tabbar-item">
        <u-button text="录入信息" color="linear-gradient(to right, #FF4856, #FF6F1C)"></u-button>
      </view>
    </u-tabbar>
  </view>
</template>

<script>
import { apiGetOldmanDetail } from '@/request/api'
export default {
  data() {
    return {
      elderlyInfo: {
        name: '',
        gender: '',
        age: '',
        idNumber: '',
        hometown: '',
        maritalStatus: '',
        medicalHistory: '',
        allergyHistory: '',
      },
      records: [
        // {
        //   day: '05',
        //   date: '2025/10',
        //   title: '定时喂药—阿莫西林',
        //   time: '12:24',
        //   description: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
        //   images: [1, 2, 3, 4]
        // },
        // {
        //   day: '04',
        //   date: '2025/10',
        //   title: '定时喂药—阿莫西林',
        //   time: '12:24',
        //   description: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
        //   images: [1, 2, 3, 4]
        // },
        // {
        //   day: '03',
        //   date: '2025/10',
        //   title: '定时喂药—阿莫西林',
        //   time: '12:24',
        //   description: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
        //   images: [1, 2, 3, 4]
        // }
      ],
    }
  },
  onLoad(options) {
    // 获取传递的参数
    const member_id = options.member_id
    this.getOldmanDetail(member_id)
  },
  methods: {
    async getOldmanDetail(member_id) {
      const res = await apiGetOldmanDetail({
        member_id: member_id,
        page: 1,
        limit: 10
      })
      this.records = res.list
      this.elderlyInfo = res.info

    },
    // 从日期时间字符串中提取年月格式 (2025/10)
    getYearMonthFromDate(dateTimeStr) {
      if (!dateTimeStr) return '';
      const date = new Date(dateTimeStr);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      return `${year}/${month}`;
    },

    // 从日期时间字符串中提取日 (05)
    getDayFromDate(dateTimeStr) {
      if (!dateTimeStr) return '';
      const date = new Date(dateTimeStr);
      const day = date.getDate();
      return day < 10 ? `0${day}` : day.toString();
    },

    // 从日期时间字符串中提取时间格式 (12:24)
    getTimeFromDate(dateTimeStr) {
      if (!dateTimeStr) return '';
      const date = new Date(dateTimeStr);
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const formattedHours = hours < 10 ? `0${hours}` : hours.toString();
      const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes.toString();
      return `${formattedHours}:${formattedMinutes}`;
    },
    // 计算年龄
    calculateAge(birthday) {
      if (!birthday || birthday === '0000-00-00') return '未知';
      const birth = new Date(birthday);
      const today = new Date();
      let age = today.getFullYear() - birth.getFullYear();
      const monthDiff = today.getMonth() - birth.getMonth();
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
        age--;
      }
      return age > 0 ? age.toString() : '未知';
    },

    // 获取婚姻状况
    getMaritalStatus(marray) {
      switch (marray) {
        case 1: return '未婚';
        case 2: return '已婚';
        case 3: return '离异';
        case 4: return '丧偶';
        default: return '未知';
      }
    },
  }

}
</script>

<style lang="scss" scoped>
.elderly-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.elderly-list {
  padding: 20px 0;
}

.name-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.name-label {
  font-size: 32rpx;
  color: #000000;
}

.name-value {
  font-size: 36rpx;
  color: #000000;
  font-weight: bold;
  margin-left: 10rpx;
}

.status-tag {
  margin-left: 20rpx;
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 信息卡片 */
.info-card {
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin: 0 20rpx 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.info-wrap {
  background-color: #F9FAFB;
  border-radius: 15rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.info-label {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 10rpx;
  display: block;
}

.info-value {
  font-size: 28rpx;
  color: #000000;
  font-weight: 500;
  display: block;
}

/* 待办活动 */
.todo-section {
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.title-indicator {
  width: 6rpx;
  height: 32rpx;
  background-color: #FF6B6B;
  border-radius: 3rpx;
  margin-right: 15rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-icon {
  width: 32rpx;
  height: 32rpx;
  background-color: #ff4d4f;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin-right: 10rpx;
}

.title-text {
  font-size: 30rpx;
  color: #000000;
  font-weight: bold;
}

.todo-card {
  background-color: #F9FAFB;
  border-radius: 15rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.todo-header {
  display: flex;
}

.header-item {
  flex: 1;
  padding: 20rpx 20rpx 0rpx;
  text-align: center;
  font-size: 28rpx;
  color: #595959;
  font-weight: bold;
}

.todo-row {
  display: flex;
}

.todo-row:last-child {
  border-bottom: none;
}

.row-item {
  flex: 1;
  padding: 10rpx 20rpx 20rpx;
  text-align: center;
  font-size: 28rpx;
}

.row-item:nth-child(1) {
  color: #ff4d4f;
  font-weight: 500;
}

.row-item:nth-child(2) {
  color: #1890ff;
}

.row-item:nth-child(3) {
  color: #52c41a;
}

/* 日常信息记录 */
.daily-section {
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.daily-card {
  border-radius: 15rpx;
  // padding: 20rpx;
}

.daily-item {
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.daily-item:last-child {
  border-bottom: none;
}

.date {
  display: inline-block;
  width: 50rpx;
  height: 50rpx;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 50%;
  text-align: center;
  line-height: 50rpx;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 15rpx;
}

.record-type {
  font-size: 28rpx;
  color: #000000;
  font-weight: 500;
  margin-right: 20rpx;
}

.time {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 10rpx;
  display: block;
}

.description {
  font-size: 26rpx;
  color: #999999;
  margin-bottom: 15rpx;
  display: block;
}

.image-grid {
  display: flex;
  gap: 15rpx;
}

.record-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
}

/* 时间线 */
.timeline {
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 44rpx;
  top: 25rpx;
  bottom: 0;
  width: 2rpx;
  background: repeating-linear-gradient(to bottom,
      #ddd 0,
      #ddd 10rpx,
      transparent 10rpx,
      transparent 20rpx);
}

.timeline-item {
  display: flex;
  margin-bottom: 40rpx;
  position: relative;
}

.timeline-marker {
  width: 120rpx;
  text-align: center;
  position: relative;
  z-index: 2;
}

.marker-number {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 50%;
  margin: 0 auto 10rpx;
}

.marker-date {
  font-size: 24rpx;
  color: #999999;
  display: block;
}

.timeline-content {
  flex: 1;
  margin-left: 20rpx;
}

.record-card {
  width: 500rpx;
  background-color: #ffffff;
  stroke-width: 1px;
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.record-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
}

.record-time {
  font-size: 28rpx;
  color: #999999;
}

.record-description {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.record-images {
  display: flex;
  gap: 10rpx;
  margin-top: 20rpx;

}

.tabbar-item {
  width: 80%;
  margin: 0 auto;
}

.u-tabbar {
  height: 60px !important;
  /* 设置 Tabbar 的高度 */
}
</style>